<template>
    <div class="main set-brokerage">
        <div class="section">
            <h4 class="title">订单返佣</h4>
            <table class="table">
                <thead class="hide">
                <tr>
                    <th width="200px"></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>董事购买:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="orderForm1" ref="orderForm1" :rules="rules">
                            <el-form-item label="推荐董事" prop="recommendDirector">
                                <el-input v-model="orderForm1.recommendDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="购买折扣" prop="discount">
                                <el-input v-model="orderForm1.discount"></el-input>
                                %
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                <tr>
                    <td>大区购买:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="orderForm2" ref="orderForm2" :rules="rules">
                            <el-form-item label="推荐董事" prop="recommendDirector">
                                <el-input v-model="orderForm2.recommendDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招董事" prop="indirectDirector">
                                <el-input v-model="orderForm2.indirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招董事" prop="unindirectDirector">
                                <el-input v-model="orderForm2.unindirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="推荐大区" prop="recommendBigArea">
                                <el-input v-model="orderForm2.recommendBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招大区" prop="indirectBigArea">
                                <el-input v-model="orderForm2.indirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招大区" prop="unindirectBigArea">
                                <el-input v-model="orderForm2.unindirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="购买折扣" prop="discount">
                                <el-input v-model="orderForm2.discount"></el-input>
                                %
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                <tr>
                    <td>兰蜜购买:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="orderForm3" ref="orderForm3" :rules="rules">
                            <el-form-item label="推荐董事" prop="recommendDirector">
                                <el-input v-model="orderForm3.recommendDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招董事" prop="indirectDirector">
                                <el-input v-model="orderForm3.indirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招董事" prop="unindirectDirector">
                                <el-input v-model="orderForm3.unindirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="推荐大区" prop="recommendBigArea">
                                <el-input v-model="orderForm3.recommendBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招大区" prop="indirectBigArea">
                                <el-input v-model="orderForm3.indirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招大区" prop="unindirectBigArea">
                                <el-input v-model="orderForm3.unindirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招兰蜜" prop="indirectLanmi">
                                <el-input v-model="orderForm3.indirectLanmi"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招兰蜜" prop="unindirectLanmi">
                                <el-input v-model="orderForm3.unindirectLanmi"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="购买折扣" prop="discount">
                                <el-input v-model="orderForm3.discount"></el-input>
                                %
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                </tbody>
            </table>
            <h4 class="title">升级返佣</h4>
            <div class="giftBag">
                <el-row :gutter="20" type="flex" align="middle" style="margin-bottom:10px;">
                    <el-col  class="giftBag-col">
                        38元礼包
                    </el-col>
                    <el-col class="giftBag-col">
                        规则一：
                    </el-col>
                    <el-col class="giftBag-col">
                        皇冠奖励条件&nbsp;&nbsp;&nbsp;&nbsp;≥
                    </el-col>
                    <el-col class="giftBag-col2">
                        <el-form :inline="true" size="small" :model="upgradeRebates" ref="NumberForm" :rules="rules">
                            <el-form-item prop="rewardConditionNumber">
                                <el-input  v-model="upgradeRebates.rewardConditionNumber" >
                                </el-input>   
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="1">
                        人
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" align="middle" style="margin-bottom:30px;">
                    <el-col style="width:360px;">
                     
                    </el-col>
                    <el-col class="tit">
                        购买者的直接推荐人，购买该礼包人数超过x，间推的奖励归直推人
                    </el-col>
                </el-row>    
                <el-row :gutter="20" type="flex" align="top">
                    <el-col class="giftBag-col">
                    </el-col>
                    <el-col class="giftBag-col">
                        规则二：
                    </el-col>
                    <el-form :inline="true" size="small" :model="upgradeRebates" ref="tableForm" >
                        <table class="table mytable">
                            <tr>
                                <th class="firstTh">
                                     <span class="title1">关系</span>
                                     <span class="title2">等级</span>
                                </th>
                                <th>直推</th>
                                <th>间推</th>
                                <th>三级关系</th>
                            </tr>
                            <tr>
                                <td>董事</td>
                                <td>
                                    <el-form-item  prop="directorDirectReward" :rules="commonRules.priceRuleZeroT"  class="mytable_form" >
                                        <el-input   v-model="upgradeRebates.directorDirectReward"  />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item prop="directorIndirectReward" :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input    v-model="upgradeRebates.directorIndirectReward"   />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td rowspan="2" style="width:200px;padding:0">
                                    <span class="tit1" >大区</span>
                                    <span class="tit2">皇冠奖励</span>
                                    <span class="tit3">无奖励</span>
                                  
                                </td>
                                <td>
                                    <el-form-item prop="areaConditionDirectReward" :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input  v-model="upgradeRebates.areaConditionDirectReward"  />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item prop="areaConditionIndirectReward"  :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input   v-model="upgradeRebates.areaConditionIndirectReward" />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item  prop="areaConditionThirdReward" :rules="commonRules.priceRuleZeroT"  class="mytable_form">
                                        <el-input  v-model="upgradeRebates.areaConditionThirdReward"   />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <el-form-item  prop="areaDirectReward" :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input  v-model="upgradeRebates.areaDirectReward"  />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item   prop="areaIndirectReward" :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input   v-model="upgradeRebates.areaIndirectReward"  />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item prop="areaThirdReward" :rules="commonRules.priceRuleZeroT" class="mytable_form" >
                                        <el-input   v-model="upgradeRebates.areaThirdReward"  />                     
                                        <span class="table-span">（元）</span>                                          
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>普通会员</td>
                                <td>
                                    0(元)
                                </td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                        
                    </el-form>    
                </el-row>   
                </div>
            </div>
            <!-- <table class="table">
                <thead class="hide">
                <tr>
                    <th width="200px"></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>大区礼包:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="levelForm1" ref="levelForm1" :rules="rules">
                            <el-form-item label="推荐董事" prop="recommendDirector">
                                <el-input v-model="levelForm1.recommendDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招董事" prop="indirectDirector">
                                <el-input v-model="levelForm1.indirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招董事" prop="unindirectDirector">
                                <el-input v-model="levelForm1.unindirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="推荐大区" prop="recommendBigArea">
                                <el-input v-model="levelForm1.recommendBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招大区" prop="indirectBigArea">
                                <el-input v-model="levelForm1.indirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招大区" prop="unindirectBigArea">
                                <el-input v-model="levelForm1.unindirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="购买折扣" prop="discount">
                                <el-input v-model="levelForm1.discount"></el-input>
                                %
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                <tr>
                    <td>兰蜜礼包:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="levelForm2" ref="levelForm2" :rules="rules">
                            <el-form-item label="推荐董事" prop="recommendDirector">
                                <el-input v-model="levelForm2.recommendDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招董事" prop="indirectDirector">
                                <el-input v-model="levelForm2.indirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招董事" prop="unindirectDirector">
                                <el-input v-model="levelForm2.unindirectDirector"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="推荐大区" prop="recommendBigArea">
                                <el-input v-model="levelForm2.recommendBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招大区" prop="indirectBigArea">
                                <el-input v-model="levelForm2.indirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招大区" prop="unindirectBigArea">
                                <el-input v-model="levelForm2.unindirectBigArea"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="直招兰蜜" prop="indirectLanmi">
                                <el-input v-model="levelForm2.indirectLanmi"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="间招兰蜜" prop="unindirectLanmi">
                                <el-input v-model="levelForm2.unindirectLanmi"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="购买折扣" prop="discount">
                                <el-input v-model="levelForm2.discount"></el-input>
                                %
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                </tbody>
            </table> -->
            <!--<h4 class="title">门店升级返佣</h4>
            <table class="table">
                <thead class="hide">
                <tr>
                    <th width="200px"></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>门店大区礼包:</td>
                    <td>
                        <el-form :inline="true" size="small" :model="storeForm" ref="storeForm">
                            <el-form-item label="直招合伙人" prop="indirectPartner" :rules="commonRules.priceRule">
                                <el-input v-model.number="storeForm.indirectPartner"></el-input>
                                元
                            </el-form-item>
                            <el-form-item label="间招合伙人" prop="unindirectPartner" :rules="commonRules.priceRule">
                                <el-input v-model.number="storeForm.unindirectPartner"></el-input>
                                元
                            </el-form-item>
                            <el-form-item label="直招大区" prop="indirectBigArea" :rules="commonRules.priceRule">
                                <el-input v-model.number="storeForm.indirectBigArea"></el-input>
                                元
                            </el-form-item>
                        </el-form>
                    </td>
                </tr>
                </tbody>
            </table>-->
            <!-- <div class="btn-center">
                <el-button type="success" :loading="btnDisabled" @click="save">保存</el-button>
            </div> -->
        </div>
</template>

<script>

    export default {
        name: 'setBrokerage',
        data() {
            const validNum = (rule, value, callback) => {
                if (!value) {
                    return callback();
                }
                if (!/^[0-9]\d*$/.test(value)) {
                    return callback(new Error('必须为大于0的整数'));
                }
                if (value < 0 ) {
                    return callback(new Error('必须为大于0的整数'));
                }
                return callback();
            };
            return {
                tab: '1',
                list: [],
                orderForm1: {
                    recommendDirector: '',
                    discount: '',
                },
                orderForm2: {
                    recommendDirector: '',
                    indirectDirector: '',
                    unindirectDirector: '',
                    recommendBigArea: '',
                    indirectBigArea: '',
                    unindirectBigArea: '',
                    discount: '',
                },
                orderForm3: {
                    recommendDirector: '',
                    indirectDirector: '',
                    unindirectDirector: '',
                    recommendBigArea: '',
                    indirectBigArea: '',
                    unindirectBigArea: '',
                    indirectLanmi: '',
                    unindirectLanmi: '',
                    discount: '',
                },
                levelForm1: {
                    recommendDirector: '',
                    indirectDirector: '',
                    unindirectDirector: '',
                    recommendBigArea: '',
                    indirectBigArea: '',
                    unindirectBigArea: '',
                    discount: '',
                },
                levelForm2: {
                    recommendDirector: '',
                    indirectDirector: '',
                    unindirectDirector: '',
                    recommendBigArea: '',
                    indirectBigArea: '',
                    unindirectBigArea: '',
                    indirectLanmi: '',
                    unindirectLanmi: '',
                    discount: '',
                },
                storeForm: {
                  indirectPartner: '',
                  unindirectPartner: '',
                  indirectBigArea: ''
                },
                rules: {
                    recommendDirector: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    indirectDirector: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    unindirectDirector: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    recommendBigArea: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    indirectBigArea: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    unindirectBigArea: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    indirectLanmi: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    unindirectLanmi: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    discount: [
                        {validator: validNum, trigger: 'change'}
                    ],
                    rewardConditionNumber:[
                        {validator: validNum, trigger: 'change'}
                    ]        
                },
                btnDisabled: false,
                upgradeRebates:{     
                }          
            }
        },
        created() {
            this.getOrderInfo();
            this.getGiftBag()
            // this.getLevelInfo();
            // this.getStoreInfo();
        },
        methods: {
            // 获取订单返佣
            getOrderInfo() {
                this.request({
                    url: '/bsnl-manage/manage/order/return/inderect/list',
                    method: 'get',
                    params: {
                        isPage: 0
                    }
                }).then(({data}) => {
                    for (let item of data) {
                        this['orderForm' + item.buyType] = item;
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //获取399礼包
            getGiftBag(){
                this.request({
                     url: '/bsnl-manage/manage/upgrade/rebate/list',
                    method: 'get',
                    params: {
                        isPage: 0
                    }
                }).then((res) => {
                   this.upgradeRebates=res.data[0]
                }).catch(err => {
                    console.log(err);
                });
            },
            // 获取升级返佣
            getLevelInfo() {
                this.request({
                    url: '/bsnl-manage/manage/order/upgrade/return/inderect/list',
                    method: 'get',
                    params: {
                        isPage: 0
                    }
                }).then(({data}) => {
                    for (let item of data) {
                        this['levelForm' + item.giftType] = item;
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            // 获取门店升级返佣
            getStoreInfo() {
                this.request({
                    url: '/bsnl-manage/manage/store/order/upgrade/return/inderect/list',
                    method: 'get',
                    params: {
                        isPage: 0
                    }
                }).then(({data}) => {
                  console.log(data)
                  this.storeForm = data[0]
                    /*for (let item of data) {
                        this['levelForm' + item.giftType] = item;
                    }*/
                }).catch(err => {
                    console.log(err);
                });
            },
            // 过滤空为0
            filterObj(obj) {
                for (let k in obj) {
                    if (!obj[k]) {
                        obj[k] = 0;
                    }
                }
                return obj;
            },
            // 保存
            async save() {
                try {
                    const valid1 = await this.$refs.orderForm1.validate();
                    const valid2 = await this.$refs.orderForm2.validate();
                    const valid3 = await this.$refs.orderForm3.validate();
                    const tableForm=await this.$refs.tableForm.validate();
                    // const valid4 = await this.$refs.levelForm1.validate();
                    // const valid5 = await this.$refs.levelForm2.validate();
                    if (!valid1 || !valid2 || !valid3||!tableForm) {
                        return false;
                    }
                    this.btnDisabled = true;
                    let upgradeRebates=[]          
                    upgradeRebates.push(this.upgradeRebates)
                    this.request({
                        url: '/bsnl-manage/manage/order/return/inderect/updateAll',
                        method: 'post',
                        data: {
                            orderReturnInderects: [
                                {
                                    buyType: 1,
                                    ...this.filterObj(this.orderForm1)
                                },
                                {
                                    buyType: 2,
                                    ...this.filterObj(this.orderForm2)
                                },
                                {
                                    buyType: 3,
                                    ...this.filterObj(this.orderForm3)
                                },
                            ],
                            upgradeRebates:upgradeRebates
                            // manageOrderUpgradeReturnInderects: [
                            //     {
                            //         giftType: 1,
                            //         ...this.filterObj(this.levelForm1)
                            //     },
                            //     {
                            //         giftType: 2,
                            //         ...this.filterObj(this.levelForm2)
                            //     },
                            // ],
                            // manageStoreOrderUpgradeReturnInderect: this.storeForm
                        }
                    }).then(() => {
                        this.btnDisabled = false;
                        this.$message.success('保存成功');
                    }).catch(err => {
                        this.btnDisabled = false;
                    });
                } catch (err) {
                    this.btnDisabled = false;
                    console.log(err);
                }
            }
        }
    }
</script>
<style lang="scss">
    @import '../../../styles/variables';

    .set-brokerage{
        .table tr{
            td{
                text-align: left;
                &:first-child{
                    background: #fcfcfc;
                }
            }
            .el-form .el-form-item{
                padding: 5px 10px;
                margin: 2px 10px 2px 0;
                border: 1px solid $border-color;
            }
            .el-input{
                width: 80px;
            }
        }
    }
    .giftBag{
        .giftBag-col{
            width:150px;
            padding-left:20px!important;
            font-size:14px;
            color: #2d2f33;
            .el-input{
                width: 80px;
                position: relative;
                top: 10px;
            }
        }
        .giftBag-col2{
            width: 110px;
            padding-left:0; 
            font-size:14px;
            color: #2d2f33;
            .el-input{
                width: 80px;
                position: relative;
                top: 10px;
            }
        }
        .tit{
            font-size: 14px;
            color: #909399;
        }
        .el-table thead{
            color: #606266;
            font-weight: 700;
            font-size: 14px;
        }
        .table.mytable{
            width: 800px;
                .firstTh{
                    text-align: center;
                    height: 80px; 
                    position: relative;
                    width: 200px;
                    .title1{
                        position: absolute;
                        top: 15px;
                        right:50px;
                    }
                    .title2{
                        position: absolute;
                        top: 45px;
                        left:50px;
                    }
                }
                td{
                    height: 45px;
                    line-height: 45px;
                    padding: 0;
                    text-align: center;
                }
                .firstTh:before {
                    content: "";
                    position: absolute;
                    width: 1px;
                    height: 215px;
                    top: 0;
                    left: 0;
                    background-color: #dcdfe6;
                    display: block;
                    transform: rotate(-68deg);
                    transform-origin: top;
                    -ms-transform: rotate(-68deg);
                    -ms-transform-origin: top;
                }
                .tit1{
                    float:left;
                    width:149px;
                    height:120px;
                    line-height: 120px;
                    text-align: center;
                    border-right: 1px solid #dcdfe6;
                    
                }
                .tit2{
                    float:left;
                    width:50px;
                    height:60px;
                    writing-mode:vertical-lr;
                    text-align: center;
                    padding-left: 3px;
                    border-bottom: 1px solid  #dcdfe6;
                }
                .tit3{
                    float:left;
                    width:50px;
                    height:60px;
                    writing-mode:vertical-lr;
                    text-align: center;
                    padding-left: 3px;
                }
                .mytable_form{
                    margin: 0;
                    padding-top:15px; 
                }
            }   
    }

 
</style>
